<template>
  <div
    style="height: 100%"
  >
    <div
      ref="deviceMap"
      style="height: 100%; width: 100%;"
    />
  </div>
</template>
<script>
import BaseView from '../../BaseView'
import { getDevice } from '@/api/iot/iotDeviceApi'
import { makeMap, makeMarket } from '@/util/mapTool'

export default {
  name: 'IotDeviceMap',
  extends: BaseView,
  data() {
    return {
      deviceId: null,
      device: {},
      map: {}
    }
  },
  mounted() {
    this.deviceId = this.detail.dataBind.deviceId
    this.getDevice()
  },
  methods: {
    getDevice() {
      getDevice({
        deviceId: this.deviceId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.device = data
          this.map = makeMap(this.$refs.deviceMap, this.device.lat, this.device.lng, 13)
          makeMarket(this.map, this.device.lat, this.device.lng)
        }
      })
    }
  }
}
</script>

